<template>
  <div class="wrap">
    <myHead title="订单详情"></myHead>
    <img src="../../../static/img/diangdanwancheng.png" alt="" class="diangdanwancheng">
    <div class="info" v-if="order">
      <div class="infohead" @click="shopInfo(order.goods_list[0].store_id)">
        <img :src="$store.state.imgurlApi+order.door_photo_image" alt="">
        <p>{{order.nickname}}</p>
        <img src="../../../static/img/youjiantou003.png" alt="">
      </div>
      <div class="box" v-for="(n,m) in order.goods_list.slice(0,3)">
        <img :src="$store.state.imgurlApi+n.image" alt="">
        <div class="boxname">
            <div class="boxh">
              <div>
                <img src="../../../static/img/zhe_1.png" alt="">
                <p>{{n.title}}</p>
              </div>
              <p>￥{{n.price}}</p>
            </div>
            <p><span v-for="p in JSON.parse(order.product_id)[m].gg">{{p}}&ensp;</span>&emsp;<span>x</span>{{JSON.parse(order.product_id)[m].number}}</p>
        </div>
      </div>
      <el-collapse-transition>
        <div v-show="showInfo">
          <div class="transition-box">
            <div class="box" v-for="(u,i) in order.goods_list.slice(3,)">
              <img :src="$store.state.imgurlApi+u.image" alt="">
              <div class="boxname">
                <div class="boxh">
                  <div>
                    <img src="../../../static/img/zhe_1.png" alt="">
                    <p>{{u.title}}</p>
                  </div>
                  <p>￥{{u.price}}</p>
                </div>
                <p><span v-for="p in JSON.parse(order.product_id)[i+3].gg">{{p}}&ensp;</span>&emsp;<span>x</span>{{JSON.parse(order.product_id)[i+3].number}}</p>
              </div>
            </div>
          </div>
        </div>
      </el-collapse-transition>
      <p @click="showInfo = !showInfo" class="xjt" v-show="order.goods_list.length>3"><img :src="showInfo?'../../../static/img/sjt111.png':'../../../static/img/xiajiantou11.png'" alt=""><span>{{showInfo?'收起':'展开更多'}}</span></p>
    </div>
    <div class="money">
      <p><span>包装费</span><span>￥{{order.pack}}</span></p>
      <p><span>配送费</span><span>￥{{order.shipping_fee}}</span></p>
      <p><span>放心吃（商家赠送）</span><span>￥0</span></p>
      <p><span>优惠券</span><span style="color: #FF7004">{{order.coupon_id==0?'￥'+0:order.coupon_id+'元'+order.coupon_type}}</span></p>
    </div>
    <div class="zongji">
      <p>总计￥{{order.total_price+order.coupon_id}}&nbsp;优惠{{order.coupon_id?order.coupon_id:0}}</p>
      <p>实付<span>￥{{order.total_price?order.total_price:0}}</span></p>
    </div>
    <div class="btn">
      <div>
        <p @click="call(order.business_phone)"><img src="../../../static/img/dianhua.png" alt="">商家电话</p>
      </div>
    </div>
  </div>
</template>

<script>
  import myHead from "../../components/ClientComponents/lib/myHead";

  export default {
    name: "orderDetails",
    components: {
      myHead
    },
    data(){
      return {
        activeNames: ['0'],
        showInfo:false,
        order:false
      }
    },
    created(){
      // 获取订单详情
      this.$myAxios('index/Order/check_details','post',{
          user_id:this.$myStorage.query(),
          id:this.$route.query.id
      }).then(res=>{
        this.order = res.data[0];
        console.log(this.order)
      })
    },
    computed:{

    },
    methods:{
      shopInfo(id){
        this.$router.push({
          name:'shopInfo',
          query:{
            id
          }
        })
      },
      handleChange(val) {
        console.log(val);
      },
      call(phone){
        // 调用拨号功能
        window.location.href = 'tel://' + phone;
      },
      jump(page){
        this.$router.push({
          name:page
        })
      }
    }
  }
</script>

<style scoped>
  .wrap {
    width: 100%;
    min-height: 6.17rem;
    padding-top: .5rem;
  }

  .diangdanwancheng {
    width: 3.61rem;
    height: 1.03rem;
    display: block;
    margin: .1rem auto;
  }

  .info {
    width: 100%;
    box-sizing: border-box;
    padding: .1rem .2rem;
  }
  .infohead {
    display: flex;
    flex-flow: row;
    align-items: center;
    border-bottom: .01rem solid #EEEEEE;
    padding-bottom: .15rem;
    margin-bottom: .1rem;
  }
  .infohead>img:nth-child(1) {
    width: .37rem;
    height: .37rem;
    border-radius: 100%;
    margin-right: .15rem;
  }
  .infohead>img:nth-child(3) {
    width: .09rem;
    height: .14rem;
    margin-left: .1rem;
  }
  .infohead>p {
    max-width: 2.2rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size:.18rem;
    font-family:PingFang SC;
    font-weight:bold;
    color: #171717;
  }

  .box {
    width: 100%;
    height: .5rem;
    margin: 0 auto .1rem;
    display: flex;
    flex-flow: row;
    align-items: center;
    justify-content: flex-start;
  }
  .boxname {
    width: calc(100% - .6rem);
    height: 100%;
    display: flex;
    flex-flow: column;
    justify-content: space-between;
  }
  .boxname>p:nth-child(2) {
    font-size:.15rem;
    font-family:PingFang SC;
    font-weight:500;
    color: #666666;
    padding-left: .05rem;
  }
  .boxname>p:nth-child(2)>span {
    font-size: .12rem;
  }
  .boxh {
    display: flex;
    flex-flow: row;
    align-items: center;
    justify-content: space-between;
    padding-right: .3rem;
  }
  .boxh>p:nth-child(2) {
    font-size:.15rem;
    font-family:PingFang SC;
    font-weight:500;
    color: #333333;
  }
  .boxh>div>p {
    max-width: 1.5rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size:.14rem;
    font-family:PingFang SC;
    font-weight:500;
    color: #666666;
  }
  .box>img:nth-child(1) {
    width: .5rem;
    height: .5rem;
    margin-right: .1rem;
  }
  .boxh>div {
    display: flex;
    flex-flow: row;
    align-items: center;
  }
  .boxh>div>img {
    width: .16rem;
    height: .16rem;
    margin-right: .1rem;
  }

  /deep/ .el-collapse-item__header {
    justify-content: center !important;
    color: #666666 !important;
  }
  /deep/ .el-collapse-item__arrow {
    margin: 0;
    /*transform: rotate(-90deg) !important;*/
  }

  .money {
    width: 100%;
    box-sizing: border-box;
    padding: 0 .2rem;
  }
  .money>p:nth-last-child(1) {
    border-bottom: .01rem solid #EEEEEE;
  }
  .money>p {
    height: .5rem;
    width: 100%;
    box-sizing: border-box;
    padding: 0 .3rem 0 .1rem;
    display: flex;
    flex-flow: row;
    align-items: center;
    justify-content: space-between;
    color: #333333;
    font-size:.14rem;
    font-family:PingFang SC;
    font-weight:500;
  }
  .zongji {
    /*padding: .2rem 0;*/
    width: 100%;
    box-sizing: border-box;
    padding:.1rem .4rem;
    display: flex;
    flex-flow: row;
    justify-content: flex-end;
    align-items: flex-end;
  }
  .zongji>p:nth-child(1) {
    font-size:.15rem;
    color: #999999;
    font-family:PingFang SC;
    font-weight:500;
  }
  .zongji>p:nth-child(2) {
    margin-left: .1rem;
    font-size:.15rem;
    font-family:PingFang SC;
    font-weight:500;
    color: #333333;
  }
  .zongji>p:nth-child(2)>span {
    font-size:.24rem;
    font-family:PingFang SC;
    font-weight:bold;
    color: #EF5D4E;
  }
  .btn {
    width: 100%;
    height: .65rem;
    box-sizing: border-box;
    padding:0 .2rem;
  }
  .btn>div {
    width: 100%;
    height: 100%;
    border-top: .01rem solid #EEEEEE;
    display: flex;
    flex-flow: row;
    justify-content: flex-end;
    align-items: center;
  }
  .btn>div>p>img {
    width: .12rem;
    height: .12rem;
    margin-right: .05rem;
  }
  .btn>div>p {
    width:1.08rem;
    height:.35rem;
    background:linear-gradient(0deg,rgba(255,142,65,1),rgba(255,110,0,1));
    box-shadow:0 .04rem .11rem 0 rgba(255,112,5,0.4);
    border-radius:.17rem;
    display: flex;
    flex-flow: row;
    justify-content: center;
    align-items: center;
    font-size:.12rem;
    font-family:SourceHanSansCN;
    font-weight:500;
    color: #ffffff;
  }

  .xjt {
    display: flex;
    flex-flow: row;
    align-items: center;
    justify-content: center;
  }
  .xjt>img {
    width: .12rem;
    height: .07rem;
    margin-right: .1rem;
  }
  .xjt>span {
    font-size:.13rem;
    font-family:PingFang SC;
    font-weight:500;
    color: #C0C0C0;
  }

</style>
